<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr {
            border: 1px solid #000;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table id="fruitShop">
        <thead>
            <tr>
                <th>欢迎光临vue开发的收银系统——水果店</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="boldFont">
                    苹果{{price}}元一斤，折扣{{discount * 10}}折
                </td>
            </tr>
            <tr>
                <td>
                    请输入你要买的斤数：<input type="text" v-model="buyNum">
                </td>
            </tr>
            <tr>
                <td>
                    <button @click="pay">结账买单~</button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    总价：{{totalPrice.toFixed(2)}}元，折后{{discountPrice.toFixed(2)}}元，省了{{savePrice.toFixed(2)}}元
                </td>
            </tr>
        </tfoot>
    </table>

    <script src="../day01_homework/12306订单详情/js/vue.js"></script>
    <script>
        const fruitShop = new Vue({
            el: '#fruitShop',
            data: {
                buyNum: 0,
                price: 10,
                discount: 0.8,
                totalPrice: 0,
                discountPrice: 0,
                savePrice: 0
            },
            // computed: {
            //     totalPrice() {
            //         return this.buyNum * this.price
            //     },
            //     discountPrice() {
            //         return this.totalPrice * this.discount
            //     },
            //     savePrice() {
            //         return this.totalPrice - this.discountPrice
            //     }
            // },
            methods: {
                pay () {
                    if (!Number(this.buyNum)) {
                        alert('请输入正确的购买数量')
                        return
                    }
                    this.totalPrice = this.buyNum * this.price
                    this.discountPrice = this.totalPrice * this.discount
                    this.savePrice = this.totalPrice - this.discountPrice 
                }
            }
        })


    </script>
</body>
</html>